<template>
  <div id="history">
    <div class="nav">
      <p>兑换记录</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>积分管理</el-breadcrumb-item>
        <el-breadcrumb-item>兑换记录</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="head">
      <el-form :model="searchData" class="top">
        <el-input
          v-model="searchData.userName"
          placeholder="用户姓名"
        ></el-input>
        <el-input v-model="searchData.phone" placeholder="手机号码"></el-input>
        <el-select v-model="searchData.getStatus" filterable placeholder="状态">
          <el-option
            v-for="(v, i) in options"
            :key="i"
            :label="v.label"
            :value="v.value"
            >{{ v.lable }}
          </el-option>
        </el-select>
        <el-date-picker
          v-model="searchData.date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button
          type="primary"
          @click="search"
          class="search"
          icon="el-icon-search"
          >搜索</el-button
        >
        <el-button
          type="primary"
          @click="reset"
          class="reset"
          icon="el-icon-refresh"
          >重置</el-button
        >
      </el-form>
    </div>

    <div class="content">
      <div class="nav-list">
        <p class="list">查询结果列表</p>
        <el-button type="primary" class="add" @click="addDialog = true"
          >新增</el-button
        >
      </div>

      <el-table :data="tableData" stripe style="width: 100%" align="center">
        <el-table-column prop="id" label="序号" width="70" align="center">
        </el-table-column>
        <el-table-column
          prop="userNumber"
          label="用户编号"
          align="center"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户姓名"
          align="center"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="personSex"
          label="人员性别"
          align="center"
          width="80"
        >
          <template slot-scope="scope">{{
            scope.row.personSex == 0 ? "男" : "女"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号码"
          align="center"
          width="90"
        >
        </el-table-column>
        <el-table-column prop="giftName" label="兑换礼品" align="center">
        </el-table-column>
        <el-table-column prop="exchangeTime" label="兑换时间" align="center">
          <template slot-scope="scope">
            <span>{{ timeTrans(scope.row.exchangeTime, 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="giftInventory"
          label="使用积分"
          align="center"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="getStatus"
          label="领取状态"
          align="center"
          width="80"
        >
          <template slot-scope="scope"
            ><span>{{
              scope.row.getStatus == 0 ? "未领取" : "已领取"
            }}</span></template
          >
        </el-table-column>
        <el-table-column prop="getTime" label="领取时间" align="center">
          <template slot-scope="scope">
            <span>{{ timeTrans(scope.row.getTime, 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <span
              style="color: #0bb197; margin-right: 5px"
              @click="see(scope.row.id)"
              >详情</span
            >
            <span v-if="scope.row.getStatus == 0">
              <span
                style="color: #0bb197; margin-right: 5px"
                @click="get(scope.row)"
                >领取</span
              >
              <span style="color: #0bb197" @click="back(scope.row)"
                >退回积分</span
              >
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="count"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :background="true"
      >
      </el-pagination>
    </div>

    <!-- 查看 -->
    <div class="detail">
      <el-dialog title="详情信息" :visible.sync="seeDialog">
        <el-form :model="seeData">
          <div>
            <el-form-item label="用户编码" :label-width="formLabelWidth">
              <span>{{ seeData.userNumber }}</span>
            </el-form-item>
            <el-form-item label="人员性别" :label-width="formLabelWidth">
              <span>{{ seeData.personSex }}</span>
            </el-form-item>
            <el-form-item label="兑换礼品" :label-width="formLabelWidth">
              <span>{{ seeData.giftName }}</span>
            </el-form-item>
            <el-form-item label="使用积分" :label-width="formLabelWidth">
              <span>{{ seeData.giftInventory }}</span>
            </el-form-item>
            <el-form-item label="领取时间" :label-width="formLabelWidth">
              <span>{{ seeData.getTime }} </span>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="用户姓名" :label-width="formLabelWidth">
              <span>{{ seeData.userName }}</span>
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth">
              <span>{{ seeData.phone }}</span>
            </el-form-item>
            <el-form-item label="兑换时间" :label-width="formLabelWidth">
              <span>{{ seeData.exchangeTime }}</span>
            </el-form-item>
            <el-form-item label="领取状态" :label-width="formLabelWidth">
              <span> {{ seeData.getStatus == 0 ? "未领取" : "已领取" }}</span>
            </el-form-item>
          </div>
        </el-form>
      </el-dialog>
    </div>
    <!-- 新增 -->
    <div class="addDia">
      <el-dialog title="新增兑换" :visible.sync="addDialog">
        <el-form :model="addData">
          <div>
            <el-form-item label="用户编号" :label-width="formLabelWidth">
              <el-select
                v-model="addData.userNumber"
                filterable
                placeholder="用户编号"
                @focus="getMessage"
              >
                <el-option
                  :key="i"
                  v-for="(v, i) in options"
                  :value="v.userNumber"
                  >{{ v.userNumber }}</el-option
                >
              </el-select>
            </el-form-item>
            <el-form-item label="兑换礼品" :label-width="formLabelWidth">
              <el-select
                v-model="addData.giftId"
                filterable
                placeholder="礼品名称"
                @focus="getgift"
              >
                <el-option :key="i" v-for="(v, i) in options2" :value="v.id">{{
                  v.id
                }}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="领取时间" :label-width="formLabelWidth">
              <el-input v-model="addData.getTime" autocomplete="off"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="兑换时间" :label-width="formLabelWidth">
              <el-input
                v-model="addData.exchangeTime"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="使用积分" :label-width="formLabelWidth">
              <el-input
                v-model="addData.giftInventory"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="领取状态" :label-width="formLabelWidth">
              <el-select v-model="addData.getStatus" placeholder="请选择">
                <el-option label="已领取" value="2"></el-option>
                <el-option label="未领取" value="0"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialog = false">取 消</el-button>
          <el-button class="footer" type="primary" @click="add"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import time from "../utils/time";
export default {
  mixins: [time],
  data() {
    return {
      options: [
        {
          label: "已领取",
          value: "2",
        },
        {
          label: "未领取",
          value: "0",
        },
      ],
      options2: [],
      currentPage: 1,
      input: "",
      count: 5,
      total: 0,
      pagenum: 1,
      tableData: [],
      seeData: {
        userName: "",
        phone: "",
        getStatus: "",
        date: [],
      },
      addData: {
        id: 0,
        exchangeTime: "",
        getStatus: "",
        getTime: "",
        giftInventory: 0,
        giftName: "",
        giftId: "",
        personSex: 0,
        phone: 0,
        userName: "",
        userNumber: "",
      },
      addDialog: false,
      searchData: {
        date: [],
        userName: "",
        phone: "",
        getStatus: "",
      },
      seeDialog: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    handleSizeChange(val) {
      this.count = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getData();
    },
    getData: function () {
      // this.$axios({
      //   url: "/smart/exchange-record/queryAll",
      //   method: "post",
      //   params: {
      //     pageNum: this.pagenum,
      //     count: this.count,
      //   },
      // }).then(({ data }) => {
      //   if (data.code == "00000") {
      //     this.tableData = data.data.list;
      //     console.log(data.data.list);
      //     this.total = data.data.total;
      //   } else {
      //     this.$message.error("加载失败！");
      //   }
      // });
      this.$axios({
        url: "/smart/exchange-record/queryByVo",
        method: "post",
        data: {
          userName: this.searchData.userName,
          phone: Number(this.searchData.phone),
          startTime: this.searchData.date[0],
          endingTime: this.searchData.date[1],
          getStatus: this.searchData.getStatus,
          pagenum: this.pagenum,
          count: this.count,
        },
      }).then(({ data }) => {
        console.log("查询数据检测", data);
        if (data.code == "00000") {
          this.tableData = data.data.list;
          this.total = data.data.total;
        } else {
          this.$message.error("查询失败");
        }
      });
    },
    search: function () {
      this.getData();
      // this.$axios({
      //   url: "/smart/exchange-record/queryByVo",
      //   method: "post",
      //   data: {
      //     userName: this.searchData.userName,
      //     phone: Number(this.searchData.phone),
      //     startTime: this.searchData.date[0].getTime(),
      //     endTime: this.searchData.date[1].getTime(),
      //     getStatus:Number( this.searchData.getStatus),
      //     pagenum: this.pagenum,
      //     count: this.count,
      //   },
      // }).then(({ data }) => {
      //   console.log('查询数据检测',data)
      //   if (data.code == "00000") {
      //     this.tableData=data.data.list;
      //     this.total = data.data.total;
      //   } else {
      //     this.$message.error("查询失败");
      //   }
      // });
    },
    add: function () {
      let exTime = new Date();
      this.addData.exchangeTime = exTime.getTime();
      this.addData.getStatus = Number(this.addData.getStatus);
      this.$axios({
        url: "/smart/exchange-record/add",
        method: "post",
        data: this.addData,
      }).then(({ data }) => {
        console.log("数据监测", data);
        if (data.code == "00000") {
          this.addDialog = false;
          this.$message.success("添加成功");
          this.getData();
          this.addData = {};
        } else {
          this.$message.error("添加失败");
        }
      });
    },
    reset: function () {
      this.pagenum = 1;
      this.searchData.userName = "";
      this.searchData.phone = "";
      this.searchData.getStatus = "";
      this.searchData.date = [];
      this.getData();
    },
    // 查看
    see(row) {
      this.seeDialog = true;
      this.$axios({
        url: "/smart/exchange-record/exchangeRecord/" + row,
        method: "post",
      }).then(({ data }) => {
        if ((data.code = "00000")) {
          data.data.getTime = this.timeTrans(data.data.getTime, 1);
          data.data.exchangeTime = this.timeTrans(data.data.exchangeTime, 1);
          this.seeData = data.data;
        } else {
          this.$message.error("查询失败");
        }
      });
    },
    getMessage: function () {
      this.$axios({
        url: "/smart/integral/userlist",
        method: "post",
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.options = data.data;
        } else {
          this.$message.error("错误");
        }
      });
    },
    // 礼品列表
    getgift: function () {
      this.$axios({
        url: "/smart/exchange-record/giftList",
        method: "get",
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.options2 = data.data;
        } else {
          this.$message.error("错误");
        }
      });
    },
    // 领取
    get: function (row) {
      row.getStatus = row.getStatus == 0 ? 1 : 0;
      this.$axios({
        url: "/smart/exchange-record/get/" + row.id,
        method: "put",
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.$message.success("领取成功");
          this.getData();
        } else {
          this.$message.error("领取失败");
        }
      });
    },
    // 退回
    back: function (row) {
      console.log(row.id, this.userNumber, this.giftInventory);
      row.giftInventory = 0;
      this.$axios({
        url: "/smart/exchange-record/exchangeRecord",
        method: "delete",
        params: {
          id: row.id,
          userNumber: row.userNumber,
          score: row.giftInventory,
        },
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.$message.success("退回成功");
          this.getData();
        } else {
          this.$message.error("退回失败");
        }
      });
    },
  },
  mounted: function () {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
#history {
  height: 100px;
  color: black;
  padding: 20px;
}
.nav {
  display: flex;
  justify-content: space-between;
}

.head {
  background: white;
  height: 80px;
  width: 100%;
  margin: 20px 0px 20px 0;
  display: flex;
  align-items: center;
  border-radius: 6px;
}
.el-input,
.el-select {
  width: 180px;
  margin: 10px;
}
.el-button {
  padding: 11px;
  width: 80px;
  margin: 0 5px 0 10px;
}
.search {
  background: #0bb197;
  border: 1px solid #0bb197;
}
.reset {
  background: white;
  color: #c0c4cc;
  border: 1px solid #dcdfe6;
}
.reset:hover {
  color: #0bb197;
}
.list {
  font-size: 14px;
  font-weight: 600;
  padding: 20px 0 10px 0;
}
.content {
  background: white;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 6px;
}
.el-pagination {
  height: 100px;
  margin-top: 30px;
  text-align: right;
}
.nav-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0 20px 0;
}
.add {
  background: #0bb197;
  border: 1px solid #0bb197;
  height: 40px;
}
.el-form {
  display: flex;
  justify-content: space-between;
}
.top{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<style lang="less">
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #0bb197;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #0bb197;
  color: #fff;
}
#history {
  .el-dialog__header {
    background-color: #0bb197;
  }
  .detail {
    .el-form-item__label,
    .el-form-item__content {
      text-align: left;
      line-height: 25px;
      margin: 0px;
    }
  }
  .el-dialog__title {
    color: white;
  }
}
</style>